<html>
<head>
<title></title>
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#code {
  width: 100%;
  height: 100%;
}
</style>
<script src="scripts/ace.js"></script>
<script src="voyages_sample.js"></script>
<script>
function init() {
  var editor = ace.edit("code");
  editor.setTheme("ace/theme/twilight");
  editor.getSession().setMode("ace/mode/javascript");
}
</script>
</head>
<body onload="init()">
<div id="code">var map;

// Called after window has loaded.
function initialize() {
  // Initialize the map.
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true,
    styles: style
  });

  // Create an array of voyages as Polylines.
  for (var i = 0; i < data.length; i++) {
    var path = [];
    for (var j = 0; j < data[i].path.length; j++) {
      path.push(new google.maps.LatLng(data[i].path[j].lat, data[i].path[j].lng));
    }

    var line = createPolyline(path, data[i].country);
    lines.push(line);
  }
}

function createPolyline(path, country) {
  var line = new google.maps.Polyline({
    path: path,
    strokeWeight: 1,
    strokeOpacity: .3,
    strokeColor: COLORS[country],
    zIndex: 1,
    visible: true,
    map: map
  });

  // Display the voyage info when the polyline is clicked.
  google.maps.event.addListener(line, 'click', function(event) {
    var voyage = data[line.index];
    // Display the voyage info...
  });

  // Highlight the polyline on mouseover.
  google.maps.event.addListener(line, 'mouseover', function() {
    line.setOptions({
      strokeWeight: 3,
      strokeOpacity: 1,
      zIndex: 999
    });
  });

  // Dim the polyline on mouseout.
  google.maps.event.addListener(line, 'mouseout', function() {
    line.setOptions({
      strokeWeight: 1,
      strokeOpacity: .3,
      zIndex: 1
    });
  });

  return line;
}

google.maps.event.addDomListener(window, 'load', initialize);
</div>
</body>
</html>
